<template>
  <div id="index">
    <!-- 全屏显示 -->
    <div class="btn">
      <span  style="color:#918F8F" >
        <!-- <img :src="isFullFlag" style="vertical-align:middle"/> -->
        <el-button type="primary" icon="el-icon-monitor" plain size="mini"
        style="margin-bottom: 5px" id="full">全屏显示</el-button>
      </span>
    </div>
    <div class="cockpit" id="content">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="container" style="width: 100%">
        <!-- 顶部 -->
        <el-row>
  <el-col :span="7"><div class="grid-content bg-purple">
    <div class="time" style="width:80%">
            <dv-decoration-10 class="d-flex jc-center" style="height:5px;" />
            <p class="now_time" style="color: #fff;" v-html="formateTimeStamp(date)"></p>
          </div>
  </div></el-col>
  <el-col :span="12">
    <div class="grid-content bg-purple-light">
      <el-row>
 <el-col :span="7"><div class="grid-content bg-purple">
 <div class="cenleft cf1" >
<dv-decoration-8 :color="['#568aea', '#568aea']" class="d-flex jc-center" style="height:50px;" />
</div>
</div></el-col>

 <el-col :span="8"><div class="grid-content bg-purple-light">
   <div class="cenleft cf2" style="text-align:center; height: 50px; display:flex;justify-content: center;">
 <h1 style="font-size: 30px; font-style: normal; color: #fff;  ">莱尼尔办公室
  <dv-decoration-5 style="height:40px;" :color="['#568aea', '#568aea'] " /></h1>
 
 </div>
 </div></el-col>
<el-col :span="7"><div class="grid-content bg-purple">
 <div class="cenleft cf3">
   <dv-decoration-8 :color="['#568aea', '#568aea']" :reverse="true" style="height:50px;" /> </div>
   </div></el-col>
   
</el-row>
  </div>
</el-col>
  <el-col :span="5"><div class="grid-content bg-purple">
    <dv-decoration-10 class="dv-dec-10-s" style="height:5px" />
  </div></el-col>
</el-row>
        <!-- <div class="title" style="margin-top: 20px">
          <div class="time" style="width: 33.3%; ">
            <dv-decoration-10 class="d-flex jc-center" style="height:5px" />
            <p class="now_time" style="color: #fff;" v-html="formateTimeStamp(date)"></p>
          </div>
          <dv-decoration-8 :color="['#568aea', '#568aea']" class="d-flex jc-center" style="width:300px;height:50px;" />
          <div class="title_name">
           
            <h1 style="font-style: normal; color: #fff; ">莱尼尔办公室</h1>
            <dv-decoration-5  :dur=2 class="tit_center" :color="['#568aea', '#568aea']" />
            <div  style="width:300px;height:10px;" >
             
              </div>
              

          </div>
          <dv-decoration-8 :color="['#568aea', '#568aea']" :reverse="true" style="width:300px;height:50px;" />
          <dv-decoration-10 class="dv-dec-10-s" style="width: 33.3%;height:5px" />
         
         
        </div> -->
        </div>
        <!-- 订单 -->
        <!-- <div class="border-box-content" style="margin-top: 20px">
          <dv-border-box-12>
            <span>今日订单信息</span>
            <div id="order">
              <dv-scroll-board :config="config2" style="width:100%;height:90px;" />
              <dv-scroll-board :config="config1" style="width:100%;height:140px;" />
            </div>
          </dv-border-box-12>
        </div> -->
        <!-- 第二行 -->
        <div class="content1" style="margin-top: 20x">
          <div class="border-box-content">
            <dv-border-box-10>
              <span>百叶箱测光照</span>
              <div id="light" style="width: 100%; height: 90%"></div>
            </dv-border-box-10>
          </div>
          <div class="border-box-content">
            <dv-border-box-10 style="width: 100%">
              <span>百叶箱测温度</span>
              <div id="oil" style="width: 100%; height: 90%"></div>
            </dv-border-box-10>
          </div>
          <div class="border-box-content">
            <dv-border-box-10>
              <span>百叶箱测湿度</span>
              <div id="refrigeration" style="width: 100%; height: 90%"></div>
            </dv-border-box-10>
          </div>
        </div>
        <!-- 第三行 -->
        <div class="content2" style="margin-top: 20px">
          <div class="border-box-content">
            <dv-border-box-8 :reverse="true">
              <span>86盒测温度</span>
              <div id="data" style="width: 100%; height: 90%"></div>
            </dv-border-box-8>
          </div>
          <div class="border-box-content">
            <dv-border-box-8>
              <span>86盒测湿度</span>
              <div id="check" style="width: 100%; height: 90%"></div>
            </dv-border-box-8>
          </div>
        </div>
      </div>
    </div>
 
</template>

<script>
import screenfull from 'screenfull'
import * as echarts from "echarts";
import { tempList, baiyexiangAPI,lightAPI } from "@/api/system/cockpit"
export default {
  data() {
    return{
      now:this.getNow(),
      // 全屏显示
      // isFullFlag:false,
      // 订单
      config1: {
        columnWidth: [], // 分别对应列宽
        align: "left", //文字对齐方式
        data: [],
        
      },
      config2: {
        header: [], //表头数据
        columnWidth: [], // 分别对应列宽
        align: "left", //文字对齐方式
        data: [],
      
      },
      // 能耗
      config3: {
        data:[]
      },
      // 昨日能耗
      yesterday: '',
      // 上月能耗
      lastmonth: '',
      loading: false, //加载
      date: new Date().getTime(),
    }
  },
  mounted() {
    // this.getorderList();
    this.getEnergy();
    this.getOilList();
    this.cold();
    this.dataAll();
    this.check();
    // 监听页面全屏
    const element=document.getElementById('content');
    document.getElementById('full').addEventListener('click',()=>{
      if(screenfull.isEnabled){
        screenfull.request(element)
      }
    })

// 测试学习调用
    // this.orders();
    // this.ordersListTest()
  },
  created() {
    this.loadTime();
  },
  methods: {
    
    // 订单列表
    // getorderList() {
    //   baiyexiangAPI(this.now).then(res => {
    //     // console.log(res);
    //     let orderAll = [];
    //     // res.data.map(item => {
    //     //   orderAll.push([item.wdr, item.partNo, item.orderDescribe,item.orderState,item.progress,item.yield])
    //     // });
    //     this.config1={
    //       data: orderAll,
    //       columnWidth: [300, 250, 400, 200, 250, 250], 
    //       align: "left",
    //       rowNum: 3,
    //       headerHeight: 40, //表头
    //       oddRowBGC: 'rgba(0,0,0,0)', //奇数行
    //       evenRowBGC: 'rgba(23,28,51,0.8)', //偶数行
    //       waitTime:5000
    //     }
    //   })
    //   baiyexiangAPI(this.now).then(res => {
    //     let orderAll = [];
    //     // res.data.map(item => {
    //     //   orderAll.push([item.wdr, item.partNo, item.orderDescribe,item.orderState,item.progress,item.yield])
    //     // });
    //     this.config2={
    //       header: ['wdr号', '零件号', '订单名称','订单状态','订单进度','合格率'],
    //       data: orderAll,
    //       columnWidth: [300, 250, 400, 200, 250, 250], 
    //       align: "left",
    //       rowNum: 1,
    //       headerHeight: 40,
    //       headerBGC: '#244278', //表头
    //       oddRowBGC: 'rgba(0,0,0,0)', //奇数行
    //       evenRowBGC: 'rgba(23,28,51,0.8)', //偶数行
    //     }
    //   })
    // },
    // 光照
    getEnergy() {
      // 百叶箱光照
      lightAPI(this.now).then(res => {
        // console.log(res);
        var chartDom = document.getElementById('light');
      
      var myChart = echarts.init(chartDom);
      
      let option = {
        
        visualMap: [
          {
            show: false,
            type: 'continuous',
            seriesIndex: 0,
            min: 0,
            max: 400
          },
        ],
        // 图表标题
        title: {
          // text: '当日温度变化曲线图',
          // left: 'center',


        },
        tooltip: { // 鼠标悬浮提示框显示 X和Y 轴数据
          trigger: 'axis',
          axisPointer: {
            // 坐标轴虚线
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          },
          // backgroundColor: 'rgba(32, 33, 36,.7)',
          // borderColor: 'rgba(32, 33, 36,0.20)',
          // borderWidth: 1,
          // // 文字提示样式
          // color: '#fff',
          // fontSize: '12',


        },

        // 维度
        legend: {
          orient: 'vertical',
          data: ['光照(LX)'],
          textStyle:{
            color:'#fff'
          }
          

        },
        // x轴
        xAxis: {
          data: res.data[1]
        },
        // y轴
        yAxis: {

        },
        grid: [
          {
            top: '20%',
            bottom: '30%'
          },
        ],
        series: [{
          // 与标题一致
          name: '光照(LX)',
          // 图表类型
          type: 'line',
          // showSymbol: false,
          //   markLine: {
          //   data: [{ type: "average", name: "Avg" }],
          // },
          markPoint: {
            data: [
              { type: "max", name: "Max" },
              { type: "min", name: "Min" },
            ],
          },
          //数据内容 
          data: res.data[0],
          label: {
            color: 'black',

            formatter: function (params) {
              return (params.value)
            },
            // show: true // 在折线拐点上显示数据
          },
          lineStyle: {
            //  normal : {
            //     color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
            //       offset: 0,
            //       color: '#ad91ed'
            //     },
            //     {
            //       offset: 0.9,
            //       color: '#c8eeeb'
            //     }]),
            //     areaStyle: {

            //       type: 'default'
            //     }
            //   }
          },

        }],
        // 使用刚指定的配置项和数据显示图表。

      };
    
      // window.onresize = myChart.resize;
      window.addEventListener("resize", function () {
        myChart.resize();
        // myChartSex2.resize();
	  });
      option && myChart.setOption(option);
      });
      // 总计
      // energyAll().then(res => {
      //   this.yesterday = res.data[0].consumption
      //   this.lastmonth = res.data[1].consumption
      // })
    },
    // 百叶箱温度
    getOilList() {
      baiyexiangAPI(this.now).then(res => {
        // console.log(res);
        var chartDom = document.getElementById('oil');
      
        var myChart = echarts.init(chartDom);
        
        let option = {
          
          visualMap: [
            {
              show: false,
              type: 'continuous',
              seriesIndex: 0,
              min: 0,
              max: 400
            },
          ],
          // 图表标题
          title: {
            // text: '当日温度变化曲线图',
            // left: 'center',


          },
          tooltip: { // 鼠标悬浮提示框显示 X和Y 轴数据
            trigger: 'axis',
            axisPointer: {
              // 坐标轴虚线
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            },
            // backgroundColor: 'rgba(32, 33, 36,.7)',
            // borderColor: 'rgba(32, 33, 36,0.20)',
            // borderWidth: 1,
            // // 文字提示样式
            // color: '#fff',
            // fontSize: '12',


          },

          // 维度
          legend: {
            orient: 'vertical',
            data: ['温度(℃)'],
            textStyle:{
            color:'#fff'
          }
            

          },
          // x轴
          xAxis: {
            data: res.data[2]
          },
          // y轴
          yAxis: {

          },
          grid: [
            {
              top: '20%',
              bottom: '30%'
            },
          ],
          series: [{
            // 与标题一致
            name: '温度(℃)',
            // 图表类型
            type: 'line',
            // showSymbol: false,
            //   markLine: {
            //   data: [{ type: "average", name: "Avg" }],
            // },
            markPoint: {
              data: [
                { type: "max", name: "Max" },
                { type: "min", name: "Min" },
              ],
            },
            //数据内容 
            data: res.data[0],
            label: {
              color: 'black',

              formatter: function (params) {
                return (params.value)
              },
              // show: true // 在折线拐点上显示数据
            },
            lineStyle: {
              //  normal : {
              //     color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              //       offset: 0,
              //       color: '#ad91ed'
              //     },
              //     {
              //       offset: 0.9,
              //       color: '#c8eeeb'
              //     }]),
              //     areaStyle: {

              //       type: 'default'
              //     }
              //   }
            },

          }],
          // 使用刚指定的配置项和数据显示图表。

        };
      
        // window.onresize = myChart.resize;
        window.addEventListener("resize", function () {
          myChart.resize();
        // myChartSex2.resize();
	  });
       
        option && myChart.setOption(option);
        
      })
    },

    // 百叶箱湿度
    cold() {
      baiyexiangAPI(this.now).then(res => {
        let cold = echarts.init(document.getElementById('refrigeration'))
        let option = {
            visualMap: [
            {
              show: false,
              type: 'continuous',
              seriesIndex: 0,
              min: 0,
              max: 400
            },
          ],
          // 图表标题
          title: {
            // text: '当日湿度变化曲线图',
            // left: 'center',
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#6a7985",
              },
            },
          },
          // 维度
          legend: {
            orient: 'vertical',
            // x:'70',
            // y:'50',
            data: ['湿度(%)'],
            textStyle:{
            color:'#fff'
          }

          },
          // x轴
          xAxis: {
            data: res.data[2]
          },
          // y轴
          yAxis: {

          },
          grid: [
            {

              top: '20%',
              bottom: '30%'
            },
          ],
          series: [{
            // 与标题一致
            name: '湿度(%)',
            // 图表类型
            type: 'line',
            // showSymbol: false,
            // 平均的线
            //   markLine: {
            //   data: [{ type: "average", name: "Avg" }],
            // },
            // 最大最小值高亮
            markPoint: {
              data: [
                { type: "max", name: "Max" },
                { type: "min", name: "Min" },
              ],
            },
            //数据内容 
            data: res.data[1],
            label: {

              color: 'black',
              formatter: function (params) {
                return (params.value)
              },
              // show: true // 在折线拐点上显示数据
            },
            lineStyle: {
              // normal: {

              //   color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              //     offset: 0,
              //     color: '#2FE0D4'
              //   },
              //   {
              //     offset: 0.9,
              //     color: '#c37fee'
              //   }]),
              //   areaStyle: {

              //     type: 'default'
              //   }
              // }
            }






          }],
          // 使用刚指定的配置项和数据显示图表。

        };
        // window.onresize = cold.resize;
        window.addEventListener("resize", function () {
          cold.resize();
        // myChartSex2.resize();
	  });
        option && cold.setOption(option);
      })
    },

    // 86盒温度
    dataAll() {
      tempList(this.now).then(res => {
        // console.log(res);
        let data = echarts.init(document.getElementById('data'))

        // window.onresize = function() {
        //   data.resize(); };
        let option = {
            visualMap: [
            {
              show: false,
              type: 'continuous',
              seriesIndex: 0,
              min: 0,
              max: 400
            },
          ],
          // 图表标题
          title: {
            // text: '当日湿度变化曲线图',
            // left: 'center',
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#6a7985",
              },
            },
          },
          // 维度
          legend: {
            orient: 'vertical',
            // x:'70',
            // y:'50',
            data: ['温度(℃)'],
            textStyle:{
            color:'#fff'
          }

          },
          // x轴
          xAxis: {
            data: res.data[2]
          },
          // y轴
          yAxis: {

          },
          grid: [
            {

              top: '20%',
              bottom: '30%'
            },
          ],
          series: [{
            // 与标题一致
            name: '温度(℃)',
            // 图表类型
            type: 'line',
            // showSymbol: false,
            // 平均的线
            //   markLine: {
            //   data: [{ type: "average", name: "Avg" }],
            // },
            // 最大最小值高亮
            markPoint: {
              data: [
                { type: "max", name: "Max" },
                { type: "min", name: "Min" },
              ],
            },
            //数据内容 
            data: res.data[1],
            label: {

              color: 'black',
              formatter: function (params) {
                return (params.value)
              },
              // show: true // 在折线拐点上显示数据
            },
            lineStyle: {
              // normal: {

              //   color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              //     offset: 0,
              //     color: '#2FE0D4'
              //   },
              //   {
              //     offset: 0.9,
              //     color: '#c37fee'
              //   }]),
              //   areaStyle: {

              //     type: 'default'
              //   }
              // }
            }






          }],
          // 使用刚指定的配置项和数据显示图表。

        };
        // window.onresize = data.resize;
       window.addEventListener("resize", function () {
          data.resize();
        //  myChartSex2.resize();
	  });
        option && data.setOption(option);
      })
    },

    // 点检情况
    check() {
      tempList(this.now).then(res => {
        let data = echarts.init(document.getElementById('check'));
        window.onresize = function() {
          data.resize(); };
          let option = {
            visualMap: [
            {
              show: false,
              type: 'continuous',
              seriesIndex: 0,
              min: 0,
              max: 400
            },
          ],
          // 图表标题
          title: {
            // text: '当日湿度变化曲线图',
            // left: 'center',
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#6a7985",
              },
            },
          },
          // 维度
          legend: {
            orient: 'vertical',
            // x:'70',
            // y:'50',
            data: ['湿度(%)'],
            textStyle:{
            color:'#fff'
          }
          },
          // x轴
          xAxis: {
            data: res.data[2]
          },
          // y轴
          yAxis: {

          },
          grid: [
            {

              top: '20%',
              bottom: '30%'
            },
          ],
          series: [{
            // 与标题一致
            name: '湿度(%)',
            // 图表类型
            type: 'line',
            // showSymbol: false,
            // 平均的线
            //   markLine: {
            //   data: [{ type: "average", name: "Avg" }],
            // },
            // 最大最小值高亮
            markPoint: {
              data: [
                { type: "max", name: "Max" },
                { type: "min", name: "Min" },
              ],
            },
            //数据内容 
            data: res.data[1],
            label: {

              color: 'black',
              formatter: function (params) {
                return (params.value)
              },
              // show: true // 在折线拐点上显示数据
            },
            lineStyle: {
              // normal: {

              //   color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              //     offset: 0,
              //     color: '#2FE0D4'
              //   },
              //   {
              //     offset: 0.9,
              //     color: '#c37fee'
              //   }]),
              //   areaStyle: {

              //     type: 'default'
              //   }
              // }
            }






          }],
          // 使用刚指定的配置项和数据显示图表。

        };
        // window.onresize = data.resize;
        option && data.setOption(option);
      })
    },
 // 当前时间
        getNow() {
            var date = new Date();
            var data1 = date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + (date.getDate() - 1);
            return data1

        },
    // 时间
    loadTime() {
      var _this = this;
      setInterval(() => {
        _this.date += 1000;
      }, 1000);
    },
    // 转换时间戳
    formateTimeStamp(time) {
      var date = new Date(time);
      var year = date.getFullYear();
      var month =date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1): date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minute =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var second =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      var week = ["日", "一", "二", "三", "四", "五", "六"][date.getDay()];
      return (
        '<span style="font-size: 55px; float:left; text-shadow: 0px 2px 7px rgba(51, 51, 51, 0.6);">' +
        hour +
        ":" +
        minute + ":" + second +
        "</span>" +
        '<span style="font-size: 16px; display:inline-block; margin-top:8px; padding-left:10px">'+
        year +
        "年" +
        month +
        "月" +
        day +
        "日" +
        '</span><br />'+
        "&nbsp;&nbsp;&nbsp;星期" +
        week
      );
    },
  }
}
</script>

<style scoped>
@import '../../../assets/styles/cockpitindex.scss';
</style>